<template>
  <div>
    <div class="container">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
      <div class="box">7</div>
      <div class="box">8</div>
      <div class="box">9</div>
      <div class="box">10</div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style>
.container {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  gap: 10px; /* 盒子之间的间隙 */
}

.box {
  width: calc(25% - 10px); /* 每个盒子占 25% 的宽度，减去间隙 */
  height: 80px; /* 固定高度 */
  background-color: lightblue;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 18px;
  border: 1px solid #ccc;
}
</style>
